
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;outline: none}
/*vertical-align: baseline;*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;outline:none;margin: 0}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none;color: #000;}
html, body {width: 100%;height: 100%;font-size: 14px;box-sizing: border-box;background: var(--el-bg-color);}

/**/
.content-box {  box-sizing: content-box;}
.border-box {  box-sizing: border-box;}
//li { list-style: none;}
/*辅助文字*/
.extra_small   { font-size: 12px;line-height:1 }
/*正文（小）*/
.small   { font-size: 13px;line-height:1.3 }
/*正文*/
.base   { font-size: 14px;line-height:1.3}
/*小标题*/
.medium   { font-size: 16px;line-height:1.5}
/*标题*/
.large   { font-size: 18px;line-height:1.7;}
/*主标题*/
.fw400{font-weight: 400 !important;}
.fw700{font-weight: 700 !important;}
/*字体*/
.fs0 { font-size: 0px !important;}
.fs10 { font-size: 10px !important;}
.fs12 { font-size: 12px !important;}
.fs14 { font-size: 14px !important;}
.fs16 { font-size: 16px !important;}
.fs18 { font-size: 18px !important;}
.fs20 { font-size: 20px !important;}
.fs22 { font-size: 22px !important;}
.fs24 { font-size: 24px !important;}
.fs28 { font-size: 28px !important;}
.fs30 { font-size: 30px !important;}
.fs36 { font-size: 36px !important;}
.extra_large   { font-size: 20px;line-height:1.7;}
.size20 { font-size: 20px;}
textarea { outline:none;resize:none !important}
.w { width: 100% !important;}
.h { height: 100% !important;}
.h20 { height: 20px;}
.h32 { height: 32px;}
.h3333 { height: 33.333%;}
.w30 { width: 30px}
.w60 { width: 60px}
.w100 { width: 100px}
.w200 { width: 200px}
.w300 { width: 300px}
.w400 { width: 400px}
.w500 { width: 500px}
.w600 { width: 600px}
.w700 { width: 700px}
.w800 { width: 800px}
.pointer {cursor: pointer !important;}
.fl { float: left}
.fr { float: right}
.clearfix:after{content:'';display: block;height: 0;clear: both;}
.title { text-align: center;}
.title-r { text-align: right;}
.hide{ display: none; }
.show{ display: block; }
.line-block { display: inline-block;}
.ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.overflow{ overflow: hidden; }
.p0 {padding: 0 !important;}
.pt0 {padding-top: 0 !important;}
.pr0 {padding-right: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.pl0 {padding-left: 0 !important;}
.p3 {padding: 3px !important;}
.pt3 {padding-top: 3px !important;}
.pb3 {padding-bottom: 3px !important;}
.pr3 {padding-right: 3px !important;}
.pl3 {padding-left: 3px !important;}
.p5 {padding: 5px !important;}
.pt5 {padding-top: 5px !important;}
.pb5 {padding-bottom: 5px !important;}
.pr5 {padding-right: 5px !important;}
.pl5 {padding-left: 5px !important;}
.pt8 {padding-top: 8px !important;}
.pb8 {padding-bottom: 8px !important;}
.pr8 {padding-right: 8px !important;}
.pl8 {padding-left: 8px !important;}
.p10 {padding: 10px !important;}
.pt10 {padding-top: 10px !important;}
.pb10 {padding-bottom: 10px !important;}
.pr10 {padding-right: 10px !important;}
.pl10 {padding-left: 10px !important;}
.p15 {padding: 15px !important;}
.pt15 {padding-top: 15px !important;}
.pb15 {padding-bottom: 15px !important;}
.pr15 {padding-right: 15px !important;}
.pl15 {padding-left: 15px !important;}
.p20 {padding: 20px !important;}
.pl20 {padding-left: 20px !important;}
.pb20 {padding-bottom: 20px !important;}
.pt20 {padding-top: 20px !important;}
.pr20 {padding-right: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pb25 {padding-bottom: 25px !important;}
.pt25 {padding-top: 25px !important;}
.pr25 {padding-right: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pb30 {padding-bottom: 30px !important;}
.pt30 {padding-top: 30px !important;}
.pr30 {padding-right: 30px !important;}
.m0 { margin: 0 !important;}
.mt0 { margin-top: 0px !important;}
.mb0 { margin-bottom: 0px !important;}
.ml0 { margin-left: 0px !important;}
.mr0 { margin-right: 0px !important;}
.m2 { margin: 2px !important;}
.ml2 { margin-left: 2px !important;}
.mr2 { margin-right: 2px !important;}
.mt2 { margin-top: 2px !important;}
.mb2 { margin-bottom: 2px !important;}
.m3 { margin: 3px !important;}
.ml3 { margin-left: 3px !important;}
.mr3 { margin-right: 3px !important;}
.mt3 { margin-top: 3px !important;}
.mb3 { margin-bottom: 3px !important;}
.m5 { margin: 5px !important;}
.ml5 { margin-left: 5px !important;}
.mr5 { margin-right: 5px !important;}
.mt5 { margin-top: 5px !important;}
.mb5 { margin-bottom: 5px !important;}
.m10 { margin: 10px !important;}
.ml10 { margin-left: 10px !important;}
.mr10 { margin-right: 10px !important;}
.mt10 { margin-top: 10px !important;}
.mb10 { margin-bottom: 10px !important;}
.ml15 { margin-left: 15px !important;}
.mr15 { margin-right: 15px !important;}
.mt15 { margin-top: 15px !important;}
.mb15 { margin-bottom: 15px !important;}
.m20 { margin: 20px !important;}
.ml20 { margin-left: 20px !important;}
.mr20 { margin-right: 20px !important;}
.mt20 { margin-top: 20px !important;}
.mb20 { margin-bottom: 20px !important;}
.ml25 { margin-left: 25px !important;}
.mb25 { margin-bottom: 25px !important;}
.mt25 { margin-top: 25px !important;}
.mr25 { margin-right: 25px !important;}
.ml30 { margin-left: 30px !important;}
.mb30 { margin-bottom: 30px !important;}
.mt30 { margin-top: 30px !important;}
.mr30 { margin-right: 30px !important;}
.lh16 { line-height: 16px}
.lh18 { line-height: 18px}
.lh20 { line-height: 20px}
.lh32 { line-height: 32px}
.lh40 { line-height: 40px}
.h40 { height: 40px}
.border { border: 1px solid var(--el-border-color);}
.border-t { border-top: 1px solid var(--el-border-color);}
.border-b { border-bottom: 1px solid var(--el-border-color);}
.border-r { border-right: 1px solid var(--el-border-color);}
.border-l { border-left: 1px solid var(--el-border-color);}
.border_r { border-right: 1px solid var(--el-border-color);}
.border_t { border-top: 1px solid var(--el-border-color);}
.border_b { border-bottom: 1px solid var(--el-border-color);}
.border_br { border-bottom: 1px solid var(--el-border-color);border-right: 1px solid var(--el-border-color);}
.border_tl { border-top: 1px solid var(--el-border-color);border-left: 1px solid var(--el-border-color);}
.border-t-d { border-top: 1px var(--el-border-color) dashed;}
.border-b-d { border-bottom: 1px var(--el-border-color) dashed;}
.border-l-d { border-left: 1px var(--el-border-color) dashed;}
.border-r-d { border-right: 1px var(--el-border-color) dashed;}
.border-lt { border-top-left-radius: 50px;}
.border-lb { border-bottom-left-radius: 50px;}
.border-rt { border-top-right-radius: 50px;}
.border-rb { border-bottom-right-radius: 50px;}
.border-no { border: none}
.rowPiece { display: inline-block;}
.active:hover { background: rgba(204, 204, 204, 0.5)}
.radius { border-radius: 50%}
.b_radius { border-radius: 6px;}
.iconWh { width: 34px;height: 34px}
.relative { position: relative;}
.absolute { position: absolute;}
.fixed { position: fixed;}
.rotate0 { transform:rotate(0)}
.rotate180 { transform:rotate(180deg)}
.sbox_shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
.qbox_shadow { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}

/* transition属性 */
.transition { transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1)}
/* 字体颜色 */
.txt { color: var(--el-text-color-primary)}
.grey { color: #666}
.grey_1 { color: #595858}
.grey_2 { color: #BFBFBF}
.pink { color: #ea76b7}
.paleBlue { color: #3cafff}
.danger { color: #F56C6C}
.white { color: #fff}
.primary { color: #599df8}
.orange { color: #f1af73}
.success { color: #52c422}
/* 背景颜色 */
.bgLan { background-color: #4c84bd}
.bgGrey { background-color: #666}
.bgInfo{ background-color: #d7d7d7}
.bgGrey_1 { background-color: #595858}
.bgGrey_2 { background-color: #BFBFBF}
.bgPink { background-color: #ea76b7}
.bgPaleBlue { background-color: #3cafff}
.bgDanger { background-color: #F56C6C}
.bgWhite { background-color: #fff}
.bgPrimary { background-color: #599df8}
.bgOrange { background-color: #f1af73}
.bgRow { background-color: #ffe6b0 }
.bgSuccess { background-color: #52c422}
// 状态点
.dot{width: 10px;height: 10px;border-radius: 50%;}
/* 定位 */
.positionF { position: fixed;z-index: 3;bottom: 0;left: 0; background: rgba(0,0,0,0.3);width: 100%;height: 100%;overflow: hidden;}
.positionC { position: absolute; left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);}
.positionCr { position: absolute; right: 0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.positionCl { position: absolute; left: 0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.positionTl { position: absolute; left: 0;top: 0;}
.positionTc { position: absolute; left: 50%;top: 0;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
.positionTr { position: absolute; right: 0;top: 0;}
.positionBr { position: absolute; right: 0;bottom: 0;}
.positionBl { position: absolute; left: 0;bottom: 0;}
.positionBc { position: absolute; left: 50%;bottom: 0;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
/*  flex布局  */
.flex1 { flex:1;}
/*  flex布局  */
.tw { display: flex;display: -webkit-flex;flex-wrap: wrap; }
/*  flex布局 超出不换行  */
.tw_nowrap { display: flex;display: -webkit-flex;flex-wrap: nowrap;}
/* flex 前后对齐  */
.tw_lr { display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;}
/* flex 底部对齐  */
.tw_b { display: flex;display: -webkit-flex;align-items: flex-end;-webkit-align-items: flex-end;}
/* flex 底部前后对齐  */
.tw_blr { display: flex;display: -webkit-flex;align-items: flex-end;-webkit-align-items: flex-end;justify-content: space-between;-webkit-justify-content: space-between;}
/* flex 居中前后对齐  */
.tw_clr { display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;align-items: center;-webkit-align-items: center;}
/* flex 纵向对齐  */
.tw_y { display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;flex-direction: column;-webkit-flex-direction: column;}
/* flex 纵向居中上下对齐  */
.tw_cytb { display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;flex-direction: column;align-items: center;-webkit-align-items: center;}
/* flex 纵向居中对齐  */
.tw_cy { display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;flex-direction: column;align-items: center;-webkit-align-items: center;}
/* flex 纵向对齐  */
.tw_cl { display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;flex-flow:row wrap;}
/* flex 顶部居中对其  */
.tw_ct { display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;}
/* flex 低部居中对其  */
.tw_cb { display: flex;display: -webkit-flex;align-items: flex-end;-webkit-align-items: flex-end;justify-content: center;-webkit-justify-content: center;}
/* flex 居中对其  */
.tw_c { display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center; align-items: center;-webkit-align-items: center;}
/* flex 后居中对其  */
.tw_cr { display: flex;display: -webkit-flex; align-items: center;-webkit-align-items: center;justify-content: flex-end;-webkit-justify-content: flex-end;}

/*滚动条样式   -----  定义滑块 内阴影+圆角*/
.slimScrollBar { width: 9px !important;}
.scrollbar::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/ height: 8px; }
.scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); }
.scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); }
/*滚动条美化*/
::-webkit-scrollbar {width:9px;height:9px;background: #fff}
/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
::-webkit-scrollbar-track {width: 6px;background-color:rgba( 0,0,0,0);-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;}
/*滚动条的设置*/
::-webkit-scrollbar-thumb {background-color:rgba(144,147,153,.3);background-clip:padding-box;min-height:28px;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;cursor: pointer;}
/*滚动条移上去的背景*/
::-webkit-scrollbar-thumb:hover {background-color:rgba(144,147,153,.5);cursor: pointer; }

/*  动画旋转  */
.rotate {animation: rotate 1s linear infinite;z-index: 2}
@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}
.bounce{animation-name:bounce}
//弹跳
@-webkit-keyframes bounce{
  0%,100%,20%,50%,80%{-webkit-transform:translateY(10px);transform:translateY(10px)}
  40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}
  60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}
}
@keyframes bounce{
  0%,100%,20%,50%,80%{-webkit-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px)}
  40%{-webkit-transform:translateY(-12px);-ms-transform:translateY(-12px);transform:translateY(-12px)}
  60%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}
}
